<template>
	<div class="books">
		<div v-for="item in bookslist" class="iofo">
			<div class="title">
				<router-link :to="`bookdetail/${item.id}`"><img :src="`/api/public/showimg/`+item.pic" /></router-link>
				<div>
					<router-link to="/"><b>{{item.name}}</b></router-link>
					<p>￥{{item.price}}</p>
				</div>
			</div>
			<button @click="add(item.id)">马上加入购物车</button>
		</div>
	</div>

</template>

<script>
	export default {
		name: 'HomeBookList',
		props: ["proplist"],
		data() {
			return {
				list: [],
			}
		},
		watch:{
			proplist(){
				this.list = this.proplist;
			}
		},
		computed: {
			bookslist() {
			return this.list.sort((a, b) => {
				return a.id - b.id  ;
			});
			}
		},
			methods: {
				add(id){
					    this.$emit('bookid',id)
				}
			},
			
			
		


	}
</script>

<style scoped>
	.books {
		margin: 0 auto;
	}

	.books .iofo {
		display: inline-block;
		width: 350px;
		height: 250px;
		background-color: #efeff0;
		margin: 5px 10px;
		border-radius: 6px;

	}

	@media screen and (max-width:1900px) {
		.books .iofo {
			width: 23.5%;
		}
	}

	@media screen and (max-width:1800px)and (min-width:1410px) {
		.books .iofo {
			width: 31%;
		}
	}

	@media screen and (max-width:1400px) and (min-width:0px) {
		.books .iofo {
			width: 45%;
		}
	}

	.books .iofo button {
		display: block;
		/* 变成行标签 */
		margin: auto;
		/* 据中 */
		background-color: #5af7ff;
		border: #c8c8c8 solid 1px;
		width: 110px;
		height: 40px;
		border-radius: 5px;
	}

	.books .iofo button:hover {
		border: #737373 solid 1px;
	}

	.books .iofo .title {
		display: flex;
		width: 100%;
	}

	.books .iofo .title img {
		width: 150px;
		height: 150px;
		margin: 15px 20px;
		border-radius: 10px;
	}

	.books .iofo .title b {
		display: block;
		margin: 30px 0px;
		color: #fea694;
	}

	.books .iofo .title p {
		margin: 30px 0px;
		color: #fea694;
		text-align: center;
	}
</style>